<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户列表</span>
      </div>

      <!-- 用户列表内容 -->
      <div class="userList">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :style="{ width: w + 'px' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            @change="handleCheckAllChange"
            v-model="checked"
          ></el-table-column>
          <el-table-column prop="account" label="账号"> </el-table-column>
          <el-table-column
            prop="userGroup"
            label="用户组"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope"
              ><span>{{ scope.row.ctime | formatDate }}</span></template
            >
          </el-table-column>

          <el-table-column label="操作" width=" 180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="
                  handleEdit(scope.$index, scope.row),
                    (dialogFormVisible = true)
                "
                >编辑</el-button
              >

              <el-dialog title="修改账号" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="账号名" :label-width="formLabelWidth" prop="account">
                    <el-input
                      v-model="form.account"
                      autocomplete="off"
      
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    label="用户组"
                    :label-width="formLabelWidth"
                    prop="userGroup"
                    :rules="rules"
                  >
                    <el-select
                      v-model="form.userGroup"
                      placeholder="请选择用户组"
                    >
                      <el-option value="普通管理员">普通管理员 </el-option>
                      <el-option value="超级管理员">超级管理员 </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="saveEditData"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>

              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px" class="btnBtu">
          <el-button type="danger" size="small" @click="allDel"
            >批量删除</el-button
          >
          <el-button type="success" size="small" @click="noChange"
            >取消选择</el-button
          >
        </div>
      </div>

      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 20, 50, 200]"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { userList } from "../../api/user"; //获取用户列表
import { userDel } from "../../api/user"; //删除账号
import dayjs from "dayjs";
import { userBatchdel, userEdit } from "../../api/user"; //批量删除账号 编辑账号
export default {
  data() {
    return {
      arr: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      checked: true,
      rows: "",
      w: document.body.clientWidth - 300, //当前屏幕宽度
      tableData: [],
      dialogFormVisible: false,
      form: {
        account: "",
        delivery: false,
        type: [],
        desc: "",
        userGroup: "",
      },
      formLabelWidth: "120px",

      rules:{
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
           //分组验证
        userGroup: [
          { required: true, message: "请选择用户组", trigger: "blur" },
        ],

      }
    };
  },

  methods: {
    //编辑
    handleEdit(index, row) {
      console.log(index, row);
      console.log(row);
      this.form = { ...row }; //数据回显
      this.rows = row.id;
    },
    async saveEditData() { 
      let res3 = await userEdit({
        id: this.rows,
        account: this.form.account,
        userGroup: this.form.userGroup,
      });
      console.log(res3);
      let { code, msg } = res3;
      if (code === 0) {
        this.$message({
          type: "success",
          message: msg,
        });
        this.assList();
      } else {
        this.$message.error(msg);
      }
      this.dialogFormVisible = false;
    },

    //删除一条账号
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(row);
          console.log(row.id);
          let res2 = await userDel({ params: { id: row.id } });
          console.log(res2);
          let { code } = res;
          if (code === 0) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.assList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleCheckAllChange(val) {
      console.log(val);
    },

    //批量删除账号
    allDel() {
      this.$confirm("此操作将永久账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          let res = await userBatchdel({
            ids: this.arr,
          });
          console.log(res);
          let { code, msg } = res;
          if (code === 0) {
            this.$message({
              type: "success",
              message: msg,
            });
            this.assList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //获取选中的id
    handleSelectionChange(val) {
      console.log(val);
      let arr2 = [];
      val.forEach((e) => {
        console.log(e.id);
        arr2.push(e.id);
      });
      this.arr = arr2;
      console.log(this.arr);
    },

    //取消选择
    noChange() {
      this.$refs.multipleTable.clearSelection();

    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.assList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.assList();
    },

    resizeHandel() {
      this.w = document.body.clientWidth - 300;
    },

//用户列表的渲染
    async assList() {
      let res = await userList({
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        },
      });
      console.log(res);
      let { total, data } = res;
      this.tableData = data;
      this.total = total;
      //this.tableData.ctime.splice(0,9)
    },
  },

  //日期数据处理
  filters: {
    formatDate(val) {
      return dayjs(val).format("YYYY/MM/DD");
    },
  },

  created() {
    //利用resize去得到当前窗口高度
    window.addEventListener("resize", this.resizeHandel);
    this.assList();
  },
  //销毁
  beforeDestroy() {
    //删除事件
    window.removeEventListener("resize", this.resizeHandel);
  },
};
</script>

<style lang="less" scoped>
.userList {
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(223, 220, 220);

  .btnBtu {
    margin-bottom: 10px;
  }

  .cell {
    width: 180px;
  }
}
</style>